import { useEffect } from "react";
import { Tooltip, Table, Tag } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconEyeOpened } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import dayjs from "dayjs";
import { format } from "timeago.js";

import { FindServersByType } from "../../_graphql/platforms";

const { Column } = Table;

const PlatformGateways = () => {
    const { windowInnerHeight, graphqlFetchPlatform } = useModel("global", (model) => model);

    const state = useReactive({
        loading: false,
        gateways: [],
    });

    const loadGateways = async () => {
        state.loading = true;
        let res = await graphqlFetchPlatform({ query: FindServersByType, variables: { type: "multi-organization-gateway" } });
        state.gateways = res?.a?.nodes || [];
        state.loading = false;
    };

    useEffect(() => {
        loadGateways();
    }, []);

    // 窗口头部：30，应用头：60，操作区内边距：24，卡面头：53，修正值：4
    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>组织网关信息</span>}
                headerExtraContent={
                    <ButtonGroup>
                        <Button icon={<IconRefresh />} onClick={loadGateways}>
                            重新加载
                        </Button>
                    </ButtonGroup>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight }}
            >
                <Table loading={state.loading} dataSource={state.gateways} size="small" pagination={false} rowKey="url" scroll={{ y: cardBodyHeight - 46 }}>
                    <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                    <Column title="组织网关名称" dataIndex="title" align="left" />
                    <Column title="组织网关网址" dataIndex="url" align="left" />
                    <Column
                        title="类型名称"
                        dataIndex="type"
                        align="center"
                        width={100}
                        render={(_) =>
                            _ && (
                                <Tooltip title={_}>
                                    <IconEyeOpened />
                                </Tooltip>
                            )
                        }
                    />
                    <Column
                        title="UUID"
                        dataIndex="uuid"
                        align="center"
                        width={100}
                        render={(_) =>
                            _ && (
                                <Tooltip title={_}>
                                    <IconEyeOpened />
                                </Tooltip>
                            )
                        }
                    />
                    <Column
                        title="节点ID"
                        dataIndex="ipfsPeerId"
                        align="center"
                        width={100}
                        render={(_) =>
                            _ && (
                                <Tooltip title={_}>
                                    <IconEyeOpened />
                                </Tooltip>
                            )
                        }
                    />
                    <Column title="节点版本号" dataIndex="ipfsPeerVersion" align="center" width={100} />
                    <Column title="运行状态" dataIndex="runningStatus" align="center" width={100} render={(_) => (_ ? <Tag color="#108ee9">在线</Tag> : <Tag color="#f50">离线</Tag>)} />
                    <Column title="是否禁用?" dataIndex="disabled" align="center" width={100} render={(_) => (_ ? <Tag color="#f50">已禁用</Tag> : <Tag color="#108ee9">正常</Tag>)} />
                    <Column
                        title="创建时间"
                        dataIndex="createTime"
                        align="center"
                        width={120}
                        render={(_) => _ && <Tooltip title={dayjs(Number(_)).format("YYYY年MM月DD日 HH:ss:mm")}>{format(_, "zh_CN")}</Tooltip>}
                    />
                </Table>
            </SemiCard>
        </div>
    );
};

export default PlatformGateways;
